<template>
    <div class="app-container customer-div">
      <!--新增编辑沟通-->
      <el-dialog
        :close-on-click-modal="false"
        title="沟通记录"
        :visible.sync="dialogVisible2"
        width="420px">
        <el-form :model="gtForm" size="mini" label-width="120px" ref="gtForm" :rules="rules2">
          <el-form-item label="员工姓名：" prop="userId" v-if="source=='list'">
            <el-select v-model="gtForm.userId" filterable placeholder="请选择" clearable >
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="沟通时间：" prop="communicateTime">
            <el-date-picker
              style="width:100%"
              v-model="gtForm.communicateTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="沟通人："  prop="communicateUserId">
            <el-select v-model="gtForm.communicateUserId" filterable placeholder="请选择" clearable>
              <el-option
                v-for="item in userOptionList"
                :key="item.userId"
                :label="item.userName"
                :value="item.userId">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="沟通内容：" prop="content">
            <el-input v-model="gtForm.content" type="textarea" :rows="2"></el-input>
          </el-form-item>
          <el-form-item label="沟通结果：" prop="result">
            <el-input v-model="gtForm.result" type="textarea" :rows="2"></el-input>
          </el-form-item>
          <el-form-item label="下次沟通时间：" prop="nextCommunicateTime">
            <el-date-picker
              style="width:100%"
              v-model="gtForm.nextCommunicateTime"
              type="date"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd">
            </el-date-picker>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose2">取 消</el-button>
          <el-button type="primary" @click="handleConfirm2" :loading="btnLoading2">确 定</el-button>
      </span>
      </el-dialog>
    </div>
</template>
<script>
    import {addCommunicate,updateCommunicate} from '@/api/company'
    import {getOrderUsersList} from '@/api/partner'
    const defaultGtForm = {
      "userId": null,						//员工id
      "communicateUserId":"",				//沟通者id
      "content": "",						//沟通内容
      "result": "",						//沟通结果
      "communicateTime": "",	//沟通时间
      "nextCommunicateTime": ""	//下次沟通时间
    }
    export default {
        name: "gtpop",
        data(){

            return {
              gtForm:JSON.parse(JSON.stringify(defaultGtForm)),
              rules2:{
                userId:[{required: true, message: '此项必填', trigger: 'change'},],
                communicateUserId:[{required: true, message: '此项必填', trigger: 'change'},],
                content:[{required: true, message: '此项必填', trigger: 'blur'},],
                result:[{required: true, message: '此项必填', trigger: 'blur'},],
                communicateTime:[{required: true, message: '此项必填', trigger: 'change'},],
                nextCommunicateTime:[{required: true, message: '此项必填', trigger: 'change'},],
              },
              btnLoading2:false,
              popType2:'',
              dialogVisible2:false,
              userOptionList:[],
              source:''
            }
        },
        computed: {

        },
        components : {

        },
        created() {
          this.getUserOptionList();
        },
        methods:{
          //获取员工下拉选项
          getUserOptionList(){
            getOrderUsersList().then((res)=>{
              this.userOptionList = res;
            })
          },
          //显示新增/编辑沟通记录
          showPop2(type,item,source){
            this.popType2 = type;
            this.source = source;
            if(type == 'add'){
              this.gtForm = JSON.parse(JSON.stringify(defaultGtForm));
            }else{
              this.gtForm = JSON.parse(JSON.stringify(item))
            }
            this.gtForm.userId = item.userId;
            console.log("this.gtForm",this.gtForm)
            this.dialogVisible2 = true;
          },
          handleClose2(){
            this.dialogVisible2 = false;
          },
          handleConfirm2(){
            this.$refs.gtForm.validate((valid) => {
              if (valid) {
                this.btnLoading2 = true;
                let data = JSON.parse(JSON.stringify(this.gtForm));
                delete data.communicateUserName;
                let fn;
                if(this.popType2 == 'add'){
                  fn = addCommunicate
                }else{
                  fn = updateCommunicate
                }
                fn(data).then(()=>{
                  this.btnLoading2 = false;
                  this.handleClose2();
                  this.$emit('getCommunicateListUser');
                }).catch(()=>{
                  this.btnLoading2 = false;
                })
              }
            })
          },

        },
    }
</script>

<style scoped lang="scss">

</style>
